import 'package:flutter/material.dart';

class BottomSheetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomSheetStateDemo();
  }
}

class BottomSheetStateDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return BottomSheetState();
  }
}

class BottomSheetState extends State<BottomSheetStateDemo> {
  final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();

  void _showBotttomSheetDialog() {
    _bottomSheetScaffoldKey.currentState
        .showBottomSheet((BuildContext context) {
      return BottomAppBar(
        child: Container(
          height: 90.0,
          width: double.infinity,
          padding: EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Icon(Icons.pause_circle_outline),
              SizedBox(
                width: 16.0,
              ),
              Text(
                '显示文字的内容1',
                style: TextStyle(
                  color: Colors.blue,
                ),
                textAlign: TextAlign.left,
              ),
              Expanded(
                child: Text(
                  '显示文字的内容2',
                  style: TextStyle(
                    color: Colors.red,
                  ),
                  textAlign: TextAlign.right,
                ),
              ),
            ],
          ),
        ),
      );
    });
  }

  Future _showModalBotttomSheetDialog() async {
    var choseValue = await showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 200.0,
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              ListTile(
                title: Text('Option A'),
                onTap: () {
                  Navigator.pop(context, 'A');
                },
              ),
              ListTile(
                title: Text('Option B'),
                onTap: () {
                  Navigator.pop(context, 'B');
                },
              ),
              ListTile(
                title: Text('Option C'),
                onTap: () {
                  Navigator.pop(context, 'C');
                },
              ),
            ],
          ),
        );
      },
    );
    debugPrint('you are chose conent is $choseValue');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomSheetDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FlatButton(
                  onPressed: () {
                    _showBotttomSheetDialog();
                  },
                  child: Text('Open BottomSheet'),
                ),
                FlatButton(
                  onPressed: () {
                    _showModalBotttomSheetDialog();
                  },
                  child: Text('Open ModalBottomSheet'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
